<template>
	<view class="content">
		<view class="account">
			<view class="item">
				<text class="money">{{countInfo.totalNumber}} <text style="font-size: 30upx;">人</text></text>
				<text>累计推广用户</text>
			</view>
			<view class="bottom">
				<view class="btn border-right">
					<text class="integral-number">{{countInfo.currentNumber}}</text>
					<text class="integral-title">本月推广用户</text>
				</view>
				<view class="btn">
					<text class="integral-number">{{countInfo.currentIntegral}}</text>
					<text class="integral-title">本月获得积分</text>
				</view>
			</view>
		</view>
		<view class="list" v-for="(list, list_i) in severList" :key="list_i">
			<view class="li" v-for="(li, li_i) in list" @tap="toPage(list_i, li_i)"
				v-bind:class="{ noborder: li_i == list.length - 1 }" hover-class="hover" :key="li.name">
				<view class="left">
					<view class="icons">
						<!-- <text class="yzb" :class="li.icon" :style="{ color: li.color }"></text> -->
						<image :src="li.icon"></image>
					</view>
					<view class="text">{{ li.name }}</view>
				</view>
				<view class="right">
					<text class="right-text">{{li.text}}</text>
					<text class="yzb yzb-next" v-if="li.show"></text>
				</view>
			</view>
		</view>

		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<uni-popup-share :bottomData="bottomData" @select="select"></uni-popup-share>
		</uni-popup>
		
		<view class="poster-pro">
			<view class="poster-pro-mask" v-if="posterFlag"></view>
			<view class="poster-pro-dialog" :class="posterFlag ? 'open' : 'close'">
				<div class="index">
					<image :src="posterImage || ''" mode="widthFix" class="posterImage"></image>
					<div style="position: fixed; top: 999999999999999999999rpx">
						<canvas
							class="hideCanvas"
							id="default_PosterCanvasId"
							canvas-id="default_PosterCanvasId"
							:style="{ width: (poster.width || 10) + 'px', height: (poster.height || 10) + 'px' }"
						></canvas>
					</div>
				</div>
			</view>
			<view class="button-wrapper" v-if="posterFlag">
				<cover-view class="save-btn" @tap="handleSaveCanvasImage">保存海报</cover-view>
				<cover-view class="save-btn cancel-btn" @tap="handleCanvasCancel">取消</cover-view>
			</view>
		</view>
	</view>
</template>

<script>
	import _app from '@/common/QS-SharePoster/app.js';
	import { getSharePoster } from '@/common/QS-SharePoster/QS-SharePoster.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				account: {
					balanceWithdraw: 0,
					totalMoney: 0,
				},
				bottomData: [
					// #ifdef APP-PLUS
					{
						text: '分享到微信',
						icon: 'yzb-weixinhaoyou',
						color:'#19D100',
						name: 'wx'
					},
					{
						text: '分享到朋友圈',
						icon: 'yzb-pengyouquan',
						color:'#07C160',
						name: 'wx'
					},
					//#endif
					{
						text: '生成分享图片',
						icon: 'yzb-Photo-share',
						color:'#d4237a',
						name: 'qq'
					},
				],
				severList: [
					[{
						name: '我要推广',
						show: true,
						icon: '/static/img/my/money.png',
						color: '#FF9552',
						url: '/pages/user/promotion/share'
					}, ],
					[{
							name: '推广明细',
							show: true,
							icon: '/static/img/my/list.png',
							color: '#FF8948',
							url: '/pages/user/promotion/records'
						},
						{
							name: '推广规则',
							show: true,
							icon: '/static/img/my/help.png',
							color: '#FF8948',
							url: '/pages/user/promotion/rule'
						},
					]
				],
				
				deliveryFlag: false, //
				posterFlag: false,
				codeImageUrl: '',
				
				poster: {},
				posterImage: '',
				canvasId: 'default_PosterCanvasId',
				strLabel: '',
				
				// 默认的全局分享内容
				share: {
					title: '人才直聘',
					path: '/pages/index/index',    // 全局分享的路径，比如 首页
					imageUrl: '/static/logo.png',    // 全局分享的图片(可本地可网络)
				},
				
				countInfo:{
					totalNumber:0,
					currentNumber:0,
					currentIntegral:0
				},
			}
		},

		onShow() {
			this.getAccount();
		},
		
		// 1.发送给朋友
		onShareAppMessage(res) {
		    return {
				title: this.share.title,
				path: this.share.path+"?referrer="+this.userInfo.id,
				imageUrl: this.share.imageUrl,
			}
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
		    return {
				title: this.share.title,
				path: this.share.path+"?referrer="+this.userInfo.id,
				imageUrl: this.share.imageUrl,
			}
		},

		methods: {
			async getAccount() {
				let res = await this.$apis.getReferrerCount();
				console.log('res=====', res);
				if (res) {
					this.countInfo=res;
					// this.severList[0][0].text="￥"+res.totalMoney;
				}
			},

			//用户点击列表项
			toPage(list_i, li_i) {
				if (this.severList[list_i][li_i].url == "/pages/user/promotion/share") {
					// #ifdef MP-WEIXIN
						// this.shareToggle();
						uni.navigateTo({
							url: this.severList[list_i][li_i].url
						})
					// #endif
					// #ifdef H5
					uni.navigateTo({
						url: this.severList[list_i][li_i].url
					})
					// #endif
				} else {
					uni.navigateTo({
						url: this.severList[list_i][li_i].url
					})
				}
			},

			shareToggle() {
				// this.$refs.share.open()
				// this.handleShowPoster();
				uni.showToast({
					icon:'none',
					title:'点击右上角···分享'
				})
			},
			

			select(e) {
				console.log("e===", e);
			},
			
			
			
			/**
			 * @description: 生成海报
			 * @param {type}
			 * @return {type}
			 * @author: hch
			 */
			handleShowPoster() {
				uni.showLoading({
					title: "海报绘制中...",
				})
				let that = this;
				// api.getQrCodeImg(this.details.postId, res => {
				// 	this.codeImageUrl = res.data.data;
				// 	console.log("二维码信息：",this.codeImageUrl);
				// 	this.shareFc();
				// 	this.deliveryFlag=false;
				// });
			
				this.shareFc();
				this.deliveryFlag = false;
			},
			
			/**
			 * @description: 关闭分享弹窗
			 * @param {type}
			 * @return {type}
			 * @author: hch
			 */
			handleClose() {
				this.deliveryFlag = false;
			},
			
			async handleCanvasCancel() {
				this.posterFlag = false;
			},
			
			async shareFc() {
				try {
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						type: 'testShareType',
						formData: {
							//访问接口获取背景图携带自定义数据
						},
						posterCanvasId: this.canvasId, //canvasId
						delayTimeScale: 50, //延时系数
						background: {
							width: 650,
							height: 1024,
							backgroundColor: '#ffffff'
						},
						drawArray: ({ bgObj, type, bgScale }) => {
							const dx = bgObj.width * 0.3;
							const fontSize = 24;
							const lineHeight = 30;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								const params = [
									{
										type: 'image',
										url: "https://qingkonglan.oss-cn-hangzhou.aliyuncs.com/common/default.png",
										alpha: 1,
										dx: 10,
										dy: 30,
										infoCallBack(imageInfo) {
											return {
												circleSet: {
													x: 110 / 2,
													y: 110 / 2,
													r: 110 / 2
												}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
												dWidth: 110, // 因为设置了圆形图片 所以要乘以2
												dHeight: 110
											};
										}
									},
								
									{
										type: 'image',
										url: "https://qingkonglan.oss-cn-hangzhou.aliyuncs.com/common/xcx-java.jpg",
										alpha: 1,
										dx: 490,
										dy: 10,
										infoCallBack(imageInfo) {
											return {
												circleSet: {
													x: 150 / 2,
													y: 150 / 2,
													r: 150 / 2
												}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
												dWidth: 150, // 因为设置了圆形图片 所以要乘以2
												dHeight: 150
											};
										}
									},
									{
										type: 'text',
										// fontStyle: 'italic',
										text: "张三",
										fontWeight: 'bold',
										size: fontSize + 2,
										color: 'black',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										lineFeed: {
											maxWidth: 340,
											lineNum: 1
										},
										infoCallBack(textLength) {
											return {
												dx: 100 + 40,
												dy: 70
											};
										},
										serialNum: 0,
										id: 'tag1' //自定义标识
									},
									{
										type: 'text',
										text: "2023-09-01",
										// fontWeight: 'bold',
										size: fontSize,
										color: '#666',
										alpha: 0.75,
										textAlign: 'left',
										textBaseline: 'middle',
										serialNum: 1,
										allInfoCallback({
											//v3.0.1 更新 可以获取drawArray中全部数据
											drawArray
										} = {}) {
											const obj = drawArray.find(item => item.id === 'tag1');
											return {
												dx: obj.dx,
												dy: obj.dy + lineHeight + 15
											};
										},
										id: 'tag2' //自定义标识
									},
									{
										type: 'text',
										text: "测试测试内容内容",
										size: fontSize + 2,
										color: 'black',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										lineFeed: {
											maxWidth: 600,
											lineNum: 4,
											lineHeight: fontSize + 20
										},
										infoCallBack(textLength) {
											return {
												dx: 25,
												dy: 180
											};
										},
										id: 'tag3' //自定义标识
									},
									{
										type: 'text',
										text: this.strLabel,
										size: fontSize + 2,
										color: 'black',
										fontWeight: 'bold',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										lineFeed: {
											maxWidth: 600,
											lineNum: 4,
											lineHeight: fontSize + 20
										},
										allInfoCallback({ drawArray } = {}) {
											const obj = drawArray.find(item => item.id === 'tag3');
											return {
												dx: obj.dx,
												dy: obj.dy + lineHeight * 5 + 30
											};
										}
									},
								];
								// let images=[];
								// //生成图片
								// if(this.details.mediaType == 1){
								// 	images.push({
								// 		type: 'image',
								// 		url: this.imgs[0],
								// 		alpha: 1,
								// 		dx: 25,
								// 		dy: 390,
								// 		infoCallBack(imageInfo) {
								// 			return {
								// 				dWidth: 600,
								// 				dHeight: 450
								// 			};
								// 		}
								// 	});
								// }else{
								// 	if(this.imgs.length==1){
								// 		images.push({
								// 			type: 'image',
								// 			url: this.imgs[0],
								// 			alpha: 1,
								// 			dx: 125,
								// 			dy: 390,
								// 			infoCallBack(imageInfo) {
								// 				return {
								// 					dWidth: 400,
								// 					dHeight: 400
								// 				};
								// 			}
								// 		});
								// 	}else{
								// 		let item;
								// 		for(let i=0;i<this.imgs.length;i++){
								// 			images.push({
								// 				type: 'image',
								// 				url: this.imgs[i],
								// 				dx: 13+12*(i%3)+200*(i%3),
								// 				dy: 390+200*parseInt(i/3)+10*parseInt(i/3),
								// 				infoCallBack(imageInfo) {
								// 					return {
								// 						dWidth: 200,
								// 						dHeight: 200
								// 					};
								// 				}
								// 			});
								// 		}
								// 	}
								// }
								// let params2=params.concat(images);
								// rs(params2);
							});
						},
						setCanvasWH: ({ bgObj, type, bgScale }) => {
							// 为动态设置画布宽高的方法，
							this.poster = bgObj;
							console.log('poster===============================', bgObj);
						}
					});
					_app.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath);
					this.posterImage = d.poster.tempFilePath;
					uni.hideLoading();
					this.posterFlag = true;
					this.$refs.popup.show();
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},
			
			handleSaveCanvasImage() {
				uni.showLoading({
					title: '保存中...'
				});
				let _this = this;
				// 把画布转化成临时文件
				// #ifndef MP-ALIPAY
				// 支付宝小程序外，其他都是用这个方法 canvasToTempFilePath
				uni.canvasToTempFilePath(
					{
						x: 0,
						y: 0,
						width: 650, // 画布的宽
						height: 1024, // 画布的高
						destWidth: 650,
						destHeight: 1024,
						canvasId: 'default_PosterCanvasId',
						success(res) {
							//保存图片至相册
							// #ifndef H5
							// 除了h5以外的其他端
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success(res) {
									uni.hideLoading();
									uni.showToast({
										title: '图片保存成功，可以去分享啦~',
										duration: 2000,
										icon: 'none'
									});
									_this.handleCanvasCancel();
								},
								fail() {
									uni.showToast({
										title: '保存失败，稍后再试',
										duration: 2000,
										icon: 'none'
									});
									uni.hideLoading();
								}
							});
							// #endif
			
							// #ifdef H5
							// h5的时候
							uni.showToast({
								title: '请长按保存',
								duration: 3000,
								icon: 'none'
							});
							_this.handleCanvasCancel();
							_this.$emit('previewImage', res.tempFilePath);
							// #endif
						},
						fail(res) {
							console.log('fail -> res', res);
							uni.showToast({
								title: '保存失败，稍后再试',
								duration: 2000,
								icon: 'none'
							});
							uni.hideLoading();
						}
					},
					this
				);
				// #endif
				// #ifdef MP-ALIPAY
				// 支付宝小程序条件下 toTempFilePath
				this.ctx.toTempFilePath(
					{
						x: this.poster.x,
						y: this.poster.y,
						width: this.poster.w, // 画布的宽
						height: this.poster.h, // 画布的高
						destWidth: this.poster.w * 5,
						destHeight: this.poster.h * 5,
						success(res) {
							//保存图片至相册
							my.saveImage({
								url: res.apFilePath,
								showActionSheet: true,
								success(res) {
									uni.hideLoading();
									uni.showToast({
										title: '图片保存成功，可以去分享啦~',
										duration: 2000,
										icon: 'none'
									});
									_this.handleCanvasCancel();
								},
								fail() {
									uni.showToast({
										title: '保存失败，稍后再试',
										duration: 2000,
										icon: 'none'
									});
									uni.hideLoading();
								}
							});
						},
						fail(res) {
							console.log('fail -> res', res);
							uni.showToast({
								title: '保存失败，稍后再试',
								duration: 2000,
								icon: 'none'
							});
							uni.hideLoading();
						}
					},
					this
				);
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
		height: 100vh;
	}

	.account {
		display: flex;
		flex-direction: column;
		background-color: $main-color;

		.item {
			padding: 30upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			text {
				color: #ffffff;
			}

			.money {
				font-size: 60upx;
			}
		}

		.bottom {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.btn {
				padding: 15upx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #ffffff;
				width: 50%;
				background: rgba(255, 255, 255, 0.15);
				font-size: 32upx;
			}

			.integral-title {
				font-size: 28upx;
				color: #f8f8f8;
			}

			.integral-number {
				font-size: 34upx;
			}

			.border-right {
				border-right: 1upx solid #eee;
			}

			// :first-child{
			// 	border-right:solid 1upx #FF822B;
			// }
		}
	}

	.list {
		background-color: #ffffff;
		width: 100%;
		// border-bottom: solid 26upx #f8f8f8;
		margin-top: 20upx;
		display: flex;
		flex-direction: column;

		.li {
			width: 100%;
			margin: 0 auto;
			height: 100upx;
			padding: 0 4%;
			border-bottom: solid 1upx #f8f8f8;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			&.noborder {
				border-bottom: 0;
			}

			.left {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.icons {
				display: flex;
				align-items: center;
				margin-right: 20upx;
				align-items: center;

				text {
					font-size: 40upx;
				}

				image {
					width: 40upx;
					height: 40upx;
				}
			}

			.text {
				// padding-left: 20upx;
				width: 100%;
				color: #666;
			}

			.to {
				flex-shrink: 0;
				width: 40upx;
				height: 40upx;
			}

			.icon-next {
				font-size: 34upx;
				color: #999;
			}
		}

		.right {
			width: 300upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;

			.right-text {
				color: #999;
				margin-right: 10upx;
			}
		}
	}
	
	.poster-pro {
		z-index: 1000;
		display: flex;
		line-height: 1;
		box-sizing: border-box;
		align-items: center;
		justify-content: flex-end;
		flex-direction: column;
	
		.poster-pro-mask {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
		}
	
		.poster-pro-dialog {
			position: relative;
			position: fixed;
			// bottom: 0;
			top: 20px;
			width: 80%;
			height: 80%;
			overflow: hidden;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0 0;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
	
			.close-btn {
				position: absolute;
				top: 0rpx;
				right: 29rpx;
				padding: 20rpx 15rpx;
			}
	
			.share-pro-title {
				padding: 28rpx 41rpx;
				font-size: 28rpx;
				color: #1c1c1c;
				background-color: #f7f7f7;
			}
	
			.share-pro-body {
				display: flex;
				font-size: 28rpx;
				color: #1c1c1c;
				flex-direction: row;
				justify-content: space-around;
	
				.share-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					justify-content: space-around;
					align-items: center;
	
					.btn-share {
						background: #ffff;
						border: #ffffff;
						display: flex;
						flex-direction: column;
						align-items: center;
					}
	
					.share-icon {
						// margin-top: 30rpx;
						// margin-bottom: 16rpx;
						font-size: 70rpx;
						color: #42ae3c;
						text-align: center;
					}
	
					&:nth-child(2) {
						.share-icon {
							color: #ff5f33;
						}
					}
				}
			}
		}
	
		/* 显示或关闭内容时动画 */
		.open {
			transform: translateY(0);
			transition: all 0.3s ease-out;
		}
	
		.close {
			transform: translateY(310rpx);
			transition: all 0.3s ease-out;
			width: 0;
			height: 0;
		}
	}
</style>